<template>
  <div class="bigbox">
    <div class="common-header">
      <div style="cursor: pointer" @click="back">
        <i class="vxe-icon-arrow-left" style="vertical-align: middle"></i
        ><span style="vertical-align: middle">返回</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </div>
    <div style="margin: 20px; margin-top: 60px">
      <vxe-toolbar>
        <template #buttons>
          <el-button type="primary" size="small" @click="insertEvent(-1)">增行</el-button>
        </template>
      </vxe-toolbar>
      <OperationCommon ref="common" isEdit :columns="tableColumn" @submit="submit" />
    </div>
  </div>
</template>
<script>
import OperationCommon from './common.vue';
import VXETable from 'vxe-table';
export default {
  components: { OperationCommon },
  data() {
    return {
      tableColumn: [
        // {
        //   width: 60,
        //   slots: {
        //     default: () => {
        //       return [
        //         <span class="drag-btn">
        //           <i class="vxe-icon-menu"></i>
        //         </span>,
        //       ];
        //     },
        //     header: () => {
        //       return [
        //         <vxe-tooltip v-model={this.showHelpTip2} content="按住后可以上下拖动排序！" enterable>
        //           <i
        //             class="vxe-icon-question-circle-fill"
        //             onClick={() => {
        //               this.showHelpTip2 = !this.showHelpTip2;
        //             }}
        //           ></i>
        //         </vxe-tooltip>,
        //       ];
        //     },
        //   },
        // },
        // {
        //   width: 60,
        //   treeNode: true,
        //   slots: { default: 'icon_default' },
        // },
        {
          field: 'field',
          treeNode: true,
          title: '字段',
          editRender: {},
          slots: { edit: 'field_edit', default: 'field_default' },
        },
        // { field: 'status', title: '状态', editRender: {}, slots: { edit: 'status_edit', default: 'status_default' } },
        {
          field: 'type',
          title: '对应自定义档案',
          editRender: {},
          slots: { edit: 'type_edit', default: 'type_default' },
        },
        {
          field: 'lineNumber',
          width: 180,
          title: '行号',
          editRender: {},
          slots: { edit: 'lineNumber_edit', default: 'lineNumber_default' },
        },
        {
          field: 'startColumn',
          width: 180,
          title: '开始列',
          editRender: {},
          slots: { edit: 'startColumn_edit', default: 'startColumn_default' },
        },
        {
          field: 'endColumn',
          title: '结束列',
          width: 180,
          editRender: {},
          slots: { edit: 'endColumn_edit', default: 'endColumn_default' },
        },
        {
          title: '操作',
          width: 280,
          slots: { default: 'operate_item' },
        },
      ],
    };
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    async insertEvent(row) {
      const $table = this.$refs.common.$refs.table;
      const record = {
        parentTag: null,
        tag: Date.now() + '',
        field: '',
        type: '',
        lineNumber: '',
        startColumn: null,
        endColumn: null,
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    getInsertEvent() {
      const $table = this.$refs.common.$refs.table;
      const insertRecords = $table.getInsertRecords();
      console.log(insertRecords);
      return insertRecords.reverse();
    },
    getRemoveEvent() {
      const $table = this.$refs.common.$refs.table;
      const removeRecords = $table.getRemoveRecords();
      console.log(removeRecords);
      return removeRecords;
    },
    getUpdateEvent() {
      const $table = this.$refs.common.$refs.table;
      const updateRecords = $table.getUpdateRecords();
      console.log(updateRecords, 123);
      return updateRecords;
    },
    async save() {
      this.$refs.common.fullValidEvent();
    },
    async submit() {
      // const insertRecords = this.getInsertEvent();
      // const updateRecords = this.getUpdateEvent();
      const removeRecords = this.getRemoveEvent();
      // await this.$api.ApiOperationalSaveOrUpdate([...insertRecords, ...updateRecords]);
      removeRecords.length > 0 && (await this.$api.ApiOperationalDeleteByIds(removeRecords.map((item) => item.id)));
      const $table = this.$refs.common.$refs.table;
      const { afterTreeFullData } = $table.$refs.xTable;
      await this.$api.ApiOperationalSaveOrUpdate(afterTreeFullData).then((res) => {
        VXETable.modal.message({
          content: '保存成功',
          status: 'success',
        });
        this.$refs.common.getList();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
